<script setup>
/**
 * @/views/home/components/ArticlesPage.vue
 * 当用户点击文章列表项时, 就会跳转到详情页面
 */

/* 引入 */
import { inject, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";
import router from "@/router/index.js";

/* 数据 */
const route = useRoute();
const articleId = route.params.id;
const article = ref("");
const axios = inject("$axios");

/* 钩子 */
// 获取文章列表的函数
const getArticlesOfId = async () => {
  try {
    const response = await axios.get(`/articles/${articleId}`);
    article.value = response.data;
    ElMessage.success("成功获取文章!");
  } catch (error) {
    console.error("获取文章失败：", error);
    ElMessage.error("您获取文章已被删除...");
  }
};

/* 钩子 */
// 在组件挂载时获取文章数据
onMounted(() => {
  getArticlesOfId();
});

/* 回调 */
const goBack = () => {
  router.push("/");
};
</script>

<template>
  <div class="articles-page">
    <el-card style="max-width: 100vw" shadow="hover">
      <template #header>
        <el-page-header :icon="ArrowLeft" @click="goBack">
          <template #content>
            <span class="text-large font-600 mr-3"> 回到主页 </span>
          </template>
        </el-page-header>
        <el-space direction="vertical">
          <h2>文章 - {{ article.title }}</h2>
          <el-tag v-if="article.sort === '动态'" type="primary">{{
            article.sort
          }}</el-tag>
          <el-tag v-if="article.sort === '文化'" type="success">{{
            article.sort
          }}</el-tag>
          <el-tag v-if="article.sort === '保护'" type="warning">{{
            article.sort
          }}</el-tag>
          <el-text class="mx-1" type="info">
            作者: {{ article.origin }} - 发布时间: {{ article.createdAt }} -
            更新时间: {{ article.updatedAt }}
          </el-text>
        </el-space>
      </template>
      {{ article.content }}
    </el-card>
  </div>
</template>

<style scoped>
/* 使得文字居中 */
.articles-page {
  text-align: center;
}
</style>
